<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="gb2312" />
<title>jquery橡皮擦工具图像擦除效果代码</title>
<style type="text/css">
* {
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-user-select: none;
}
body {
    background: #FFF;
	color: #000;
	margin: 5px;
	padding: 0px;
	margin-bottom: 45px;
	text-align: center;
	font-family: Helvetica, Arial;
}
a {
	color: #000;
}
a.box {
	text-decoration: none;
	display: inline-block;
	color: #FFF;
	background: #000;
	padding: 10px;
	margin: 10px 10px 10px 50px;
}
.big {
	font-size: 2em;
	display: inline-block;
	margin: 10px;
}
.container {
	position: relative;
	display: inline-block;
	width: 533px;
	height: 380px;
}
#robot {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
	-webkit-box-shadow: 0px 0px 20px 0px #707070;
	-moz-box-shadow: 0px 0px 20px 0px #707070;
	box-shadow: 0px 0px 20px 0px #707070;
}
#redux {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 2;
}
</style>
<script type='text/javascript' src="js/jquery.min.js"></script>
<script type='text/javascript' src='js/jquery.eraser.js'></script>
<script type = "text/javascript">
addEventListener( "load", init, false );
function init( event ) {
	$("#redux").eraser();
}
function reset(event) {
	$("#redux").eraser('reset');
	event.preventDefault();
}
function grow(event) {
	$("#redux").eraser("size",150);		/* 橡皮擦大小 */
	event.preventDefault();
}
</script>
</head>

<body>
<span class="container">
	<img id="robot" src="images/Tesla.jpg" />
	<img id="redux" src="images/Tesla2.jpg" />
</span>
<p>
	<a href="#" onClick="reset(event);" class="box">重置</a>
</p>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"></div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>本测试素材编写yuyang.j</p>
</div>
</body>
</html>